<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 音韵流声</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .profile-container {
            max-width: 800px;
            margin: 50px auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .profile-header h2 {
            margin: 0;
            font-size: 28px;
            font-weight: 300;
        }
        
        .profile-content {
            padding: 40px;
        }
        
        .avatar-section {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .avatar-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid #667eea;
            object-fit: cover;
            margin: 0 auto 20px;
            display: block;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .avatar-upload {
            position: relative;
            display: inline-block;
        }
        
        .avatar-upload input[type="file"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .avatar-upload-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .avatar-upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        
        .btn-save {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 40px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 15px;
        }
        
        .btn-save:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        
        .btn-back {
            background: #6c757d;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-back:hover {
            background: #5a6268;
            transform: translateY(-2px);
        }
        
        .alert {
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
        .spinner-border {
            color: #667eea;
        }
        
        .user-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .user-info h5 {
            color: #667eea;
            margin-bottom: 15px;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #e9ecef;
        }
        
        .info-item:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-weight: 600;
            color: #666;
        }
        
        .info-value {
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-container">
            <div class="profile-header">
                <h2>个人信息管理</h2>
            </div>
            
            <div class="profile-content">
                <!-- 用户基本信息显示 -->
                <div class="user-info">
                    <h5>基本信息</h5>
                    <div class="info-item">
                        <span class="info-label">用户名：</span>
                        <span class="info-value" id="username-display">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">角色：</span>
                        <span class="info-value" id="role-display">-</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">注册时间：</span>
                        <span class="info-value" id="create-time-display">-</span>
                    </div>
                </div>
                
                <!-- 头像上传区域 -->
                <div class="avatar-section">
                    <img id="avatar-preview" src="images/1.jpg" alt="头像预览" class="avatar-preview">
                    <div class="avatar-upload">
                        <input type="file" id="avatar-input" accept="image/*">
                        <button type="button" class="avatar-upload-btn" onclick="document.getElementById('avatar-input').click()">
                            更换头像
                        </button>
                    </div>
                </div>
                
                <!-- 管理员提示 -->
                <div id="admin-warning" class="alert alert-warning" style="display: none;">
                    <strong>注意：</strong>管理员账户不允许修改个人信息，包括昵称和头像。
                </div>
                
                <!-- 个人信息修改表单 -->
                <form id="profile-form">
                    <div class="form-group">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" name="nickname" placeholder="请输入昵称">
                    </div>
                    
                    <div class="loading" id="loading">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">加载中...</span>
                        </div>
                        <p>正在保存...</p>
                    </div>
                    
                    <div class="text-center">
                        <button type="submit" class="btn-save" id="save-btn">保存修改</button>
                        <button type="button" class="btn-back" onclick="goBack()">返回</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        let currentUser = null;
        
        // 页面加载时获取用户信息
        $(document).ready(function() {
            loadUserProfile();
            
            // 头像上传处理
            $('#avatar-input').change(function() {
                uploadAvatar();
            });
            
            // 表单提交处理
            $('#profile-form').submit(function(e) {
                e.preventDefault();
                updateProfile();
            });
        });
        
        // 加载用户信息
        function loadUserProfile() {
            $.ajax({
                url: '/user/getProfile',
                type: 'GET',
                success: function(response) {
                    if (response.status === 200) {
                        currentUser = response.data;
                        displayUserInfo();
                        fillForm();
                    } else {
                        showAlert('获取用户信息失败: ' + response.message, 'danger');
                    }
                },
                error: function() {
                    showAlert('网络错误，请稍后重试', 'danger');
                }
            });
        }
        
        // 显示用户信息
        function displayUserInfo() {
            if (currentUser) {
                $('#username-display').text(currentUser.username || '-');
                $('#role-display').text(currentUser.role === 'admin' ? '管理员' : '普通用户');
                $('#create-time-display').text(formatDate(currentUser.createTime) || '-');
                
                // 显示头像
                if (currentUser.avatar && currentUser.avatar !== '') {
                    // 如果头像路径不是以http开头，添加完整路径
                    if (currentUser.avatar.startsWith('/')) {
                        $('#avatar-preview').attr('src', currentUser.avatar);
                    } else {
                        $('#avatar-preview').attr('src', '/' + currentUser.avatar);
                    }
                } else {
                    // 设置默认头像
                    $('#avatar-preview').attr('src', '/images/1.jpg');
                }
                
                // 如果是管理员，显示警告并禁用表单
                if (currentUser.role === 'admin') {
                    $('#admin-warning').show();
                    $('#profile-form').hide();
                    $('.avatar-section').hide();
                }
            }
        }
        
        // 填充表单
        function fillForm() {
            if (currentUser) {
                $('#nickname').val(currentUser.nickname || '');
            }
        }
        
        // 上传头像
        function uploadAvatar() {
            const fileInput = document.getElementById('avatar-input');
            const file = fileInput.files[0];
            
            if (!file) {
                return;
            }
            
            // 验证文件类型
            if (!file.type.startsWith('image/')) {
                showAlert('请选择图片文件', 'danger');
                return;
            }
            
            // 验证文件大小 (5MB)
            if (file.size > 5 * 1024 * 1024) {
                showAlert('图片大小不能超过5MB', 'danger');
                return;
            }
            
            const formData = new FormData();
            formData.append('avatar', file);
            
            $.ajax({
                url: '/user/uploadAvatar',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    console.log('头像上传响应:', response);
                    if (response.status === 200) {
                        // 确保头像路径正确
                        var avatarUrl = response.data;
                        if (avatarUrl && !avatarUrl.startsWith('http') && !avatarUrl.startsWith('/')) {
                            avatarUrl = '/' + avatarUrl;
                        }
                        $('#avatar-preview').attr('src', avatarUrl);
                        showAlert('头像上传成功！请重新登录查看更新', 'success');
                        // 更新当前用户信息
                        if (currentUser) {
                            currentUser.avatar = avatarUrl;
                        }
                        // 延迟跳转到登录页面
                        setTimeout(function() {
                            window.location.href = '/login.html';
                        }, 2000);
                    } else {
                        showAlert('头像上传失败: ' + response.message, 'danger');
                    }
                },
                error: function(xhr, status, error) {
                    console.log('头像上传错误:', xhr.responseText);
                    showAlert('头像上传失败，请稍后重试', 'danger');
                }
            });
        }
        
        // 更新个人信息
        function updateProfile() {
            const nickname = $('#nickname').val().trim();
            
            // 检查是否为管理员
            if (currentUser && currentUser.role === 'admin') {
                showAlert('管理员账户不允许修改个人信息', 'warning');
                return;
            }
            
            $('#loading').show();
            
            $.ajax({
                url: '/user/updateProfile',
                type: 'POST',
                data: {
                    nickname: nickname
                },
                success: function(response) {
                    $('#loading').hide();
                    console.log('昵称更新响应:', response);
                    if (response.status === 200) {
                        showAlert('个人信息更新成功！请重新登录使用新昵称', 'success');
                        // 延迟跳转到登录页面
                        setTimeout(function() {
                            window.location.href = '/login.html';
                        }, 2000);
                    } else {
                        showAlert('更新失败: ' + response.message, 'danger');
                    }
                },
                error: function(xhr, status, error) {
                    $('#loading').hide();
                    console.log('昵称更新错误:', xhr.responseText);
                    showAlert('网络错误，请稍后重试', 'danger');
                }
            });
        }
        
        // 显示提示信息
        function showAlert(message, type) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `;
            $('.profile-content').prepend(alertHtml);
            
            // 3秒后自动消失
            setTimeout(function() {
                $('.alert').fadeOut();
            }, 3000);
        }
        
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
        
        // 返回上一页
        function goBack() {
            if (window.history.length > 1) {
                window.history.back();
            } else {
                window.location.href = '/index.html';
            }
        }
    </script>
</body>
</html>
